<template>
	<joy-page class="joyPage" :needLogin="false">
		<m-swiper :list="banner" :type="3"></m-swiper>
		<view class="bg-white safe padding-right padding-left">
			<view class="flex safe-wrap">
				<view class="flex-sub" @tap="showModal(0)">
					<image class="safe-img" src="/static/img/home5.png" mode=""></image><br>
					<span>投资安全</span>
				</view>
				<view class="flex-sub" @tap="showModal(1)">
					<image class="safe-img" src="/static/img/home6.png" mode=""></image><br>
					<span>信息安全</span>
				</view>
				<view class="flex-sub" @tap="showModal(2)">
					<image class="safe-img" src="/static/img/home7.png" mode=""></image><br>
					<span>资金安全</span>
				</view>
				<view class="flex-sub" @tap="showModal(3)">
					<image class="safe-img" src="/static/img/home8.png" mode=""></image><br>
					<span>尽调审计</span>
				</view>
			</view>
		</view>
		<h1 class="title">热门项目 <span class='more' @tap="more('project')">更多<span class="cuIcon-right"></span></span></h1>
		<view class="bg-white padding project">
			<view class="grid col-3 grid-square">
				<view class="bg-img" v-for="(item,index) in project" :key="index" :style="[{ backgroundImage:'url(' + imgUrl + item.picture + ')' }]"></view>
			</view>
		</view>
		<h1 class="title">资讯中心 <span class='more' @tap="more('info')">更多<span class="cuIcon-right"></span></span></h1>
		<info-card :newList='newList' :isHome="true"></info-card>
		<view class="cu-modal" :class="isShowModal?'show':''">
			<view class="cu-dialog safe-bg">
				<view class="modal-close text-black safe-close">
					<view class="action" @tap="isShowModal=false">
						<text class="cuIcon-close "></text>
					</view>
				</view>
				<view class="safe-title">
					{{safeTitle}}
				</view>
				<view class="safe-content">
				    {{safeContent}}
				</view>
			</view>
		</view>
	</joy-page>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'
	import mSwiper from "@/components/m-swiper/m-swiper.vue"
	import infoCard from "@/components/uni-card/infoCard.vue"
	export default {
		components: {
			mSwiper,
			infoCard
		},
		computed: {
			...mapState(['forcedLogin']),
			...mapGetters(['hasLogin'])
		},
		data() {
			let that = this;
			return {
			  imgUrl: that.$mConfig.assetsPath,
				banner: [],
				project:[],
				newList:[],
				grid: [],
				ka: [],
				adList: [],
				isShowModal: false,
				safeTitle: '',
				safeContent:'',
				titleList:[
					'投资安全',
					'信息安全',
					'资金安全',
					'尽调审计'
				],
				safeContentList:[
					"1、好融艺拥有一支专业的投资团队，出身于金融机构、互联网和文创领域，以专业“PE”视角精选优质创新创业项目给投资人，并对项目公司进行严格的审查，提供相关的信息供资人决策参考。"+
                    "2、并且公司引进专业人员成立投后管理团队，并与第三方公司合作丰富投后管理体系，做到投后信息披露真实全面、及时透明，与投资人作为一体，对所投项目进行管家式跟踪管理。",
					"1、投资人在注册好融艺平台时签订《用户注册服务协议》、《投资人服务协议》、《投资人风险提示书》对投资人进行风险警示预期教育，同时设置合"+
                     "格投资人门槛，平台方不为其提供任何征信措施，仅提供信息发布服务。2、在投资人充分了解项目情况投资后签订《投资协议》《收益权转让合同》 保障投资人利益。",
					"好融艺与通联支付合作，实行第三方资金托管，实行专款专用，与平台自有资金完全分离，为投资人的资金安全保驾护航",
					"1、好融艺引进第三方进行项目尽调的众筹平台，在项目风险方面做到严格把控，对项目进行360度的审核。创投服务体系。2、为项目方提供不同成长阶段的支持和配套"+
                    "资源，为项目方寻找最佳退出机会和退出渠道，实现企业增值和投资人收益的愿景。"
				]
			}
		},
		async onLoad(query) {
			console.log(this)
			console.log(query)
			console.log("APP进入首页");
			await this.$AppEntryController.main(query);
			this.getBanners();
			// this.more('project')
		},
		onPullDownRefresh(){
		  this.getBanners();
		  ﻿uni.stopPullDownRefresh() //停止下拉刷新
		},
		methods: {
			showModal(index){
				this.safeTitle = this.titleList[index]
				this.safeContent=this.safeContentList[index]
				this.isShowModal = true
			},
			goPage(id){
				this.$mRouter.push({
					route: this.$mRoutesConfig.infoDetail,
					query: {
						id: id
					}
				})
			},
			htmlEncode(text) {
			     if (text) {
			       var arrEntities = { lt: "<", gt: ">", nbsp: " ", amp: "&", quot: '"' };
			       return text.replace(/&(lt|gt|nbsp|amp|quot);/gi, function(all, t) {
			         return arrEntities[t];
			       });
			     } else {
			       return "";
			     }
			   },
			more(routeName) {
				this.$mRouter.switchTab({
					route: this.$mRoutesConfig[routeName],
				})
			},

			async getBanners() {
				let indexInfo = await this.$apis.getBanner();
				this.project = indexInfo.data_list.slice(0,6)
				this.banner = indexInfo.banner_list
				this.newList = indexInfo.cate_list.list
			}
		}
	}
</script>

<style lang="scss" scoped>
	.safe{
		.safe-wrap{
			padding: 43rpx 10rpx;
			border-radius: 12rpx;
			box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.05);
		}
		text-align: center;
		font-size:24rpx;
		font-family:PingFang SC;
		color:rgba(100,100,100,1);
		padding-bottom: 19rpx;
		.safe-img{
			width: 53rpx;
			height: 53rpx;
			margin-bottom: 12rpx;
		}
	}
	.project{
		margin-bottom: 24rpx;
	}
	.title{
		display: flex;
		font-size:32rpx;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(255,113,53,1);
		line-height:52rpx;
		background-color: #FFFFFF;
		padding: 46rpx 30rpx 0;
		justify-content: space-between;
		.more{
			font-size:26rpx;
			font-family:PingFang SC;
			font-weight: normal;
			color:rgba(100,100,100,1);
		}
	}
	.safe-bg{
		/* width: 646rpx;
		height: 818rpx; */
		width: 646rpx;
		height: 818rpx;
		background: url('https://test.hrycf.com/hryxcx/safeSure.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		.safe-close{
			top: 40rpx;
		}
		.safe-title{
			position: absolute;
			left: 50%;
			transform: translate(-50%,10rpx);
			color: #ffffff;
			font-size: 48rpx;
			font-weight: 500;
		}
		.safe-content{
			width: 540rpx;
			height: 565rpx;
			overflow: auto;
			max-height: 565rpx;
			margin: 162rpx auto 0;
			text-indent: 56rpx;
			text-align: justify;
			color: #323232;
			font-size: 28rpx;
		}
	}
</style>
